<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f1(){
            console.log(1111)
        }

        // 当页面加载完毕后再执行
        window.onload = function(){     
            var mybtn = document.getElementById('mybtn')

            // 方式2：动态绑定，通过js代码绑定事件
            mybtn.onclick = function(event){
                console.log(event)
                console.log(event.target)
                console.log(this) // this指向事件源

                var names = ['tom', 'jerry', 'lucy', 'lili']
                // names.forEach(function(item, index){
                //     console.log(index, item, this) // this为window
                // })
                names.forEach((item, index) => {
                    console.log(index, item, this) // this指向外层的事件源，不会产生新的指向
                })
            }
        }
            


    </script>
</head>
<body>
    <!-- 方式1：静态绑定，通过标签的事件属性绑定 -->
    <button onclick="f1()">按钮1</button> 

    <button id="mybtn">按钮2</button>


    <script>
        // var mybtn = document.getElementById('mybtn')
        // console.log(mybtn)
    </script>
</body>
</html>